import { PageContainer } from '@ant-design/pro-layout';
import { Button, Card, message, Row, Tabs } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import ClassData from './components/classData';
import Interact from './components/interact';
import Cartoon from './components/cartoon';
import Video from './components/video';
import Practice from './components/practice';
import { history } from 'umi';
import { courseItemExport, courseItemInfo, courseStepList } from '@/services/situation';
import type { Situation } from '@/models/situation';
import moment from 'moment';

export default function CourseDataPage() {
  const { TabPane } = Tabs;
  const [, setActiveKey] = useState<string>('1');
  const [dataInfo, setInfo] = useState<Situation>();
  // const [course, setCourse] = useState<number>();
  // const [interact, setInteract] = useState<number>();
  // const [cartoon, setCartoon] = useState<number>();
  // const [video, setVideo] = useState<number>();
  // const [practice, setPractice] = useState<number>();
  const [loading, setLoading] = useState<boolean>(false);
  const [studyDataItem, setStudyDataItem] = useState<any[]>([]);

  const [arrCourse, setArrCourse] = useState();
  const [arrInteract, setArrInteract] = useState();
  const [arrVideo, setArrVideo] = useState();
  const [arrCartoon, setArrCartoon] = useState();
  const [arrPractice, setArrPractice] = useState();

  const activityId = history.location.query?.activityId;
  const itemId = history.location.query?.id;

  useEffect(() => {
    if (itemId) {
      (async () => {
        const res = (await courseItemInfo({ id: Number(itemId) }))?.result;
        setInfo(res);
      })();
      (async () => {
        const res = (await courseStepList({ itemId: Number(itemId) }))?.result;
        setStudyDataItem(res?.records);
        setArrCourse(res.filter((item: any) => item.type == 0 || item.type == 6));
        setArrInteract(res.filter((item: any) => item.type == 1));
        setArrVideo(res.filter((item: any) => item.type == 2));
        setArrCartoon(res.filter((item: any) => item.type == 3));
        setArrPractice(res.filter((item: any) => item.type == 4));
        //type 0-6课堂数据 1互动视频课 2录像课 3动画课 4练习题
        // res?.forEach((item: Situation) => {
        //   if (item.type == 0 || item.type == 6) {
        //     // arrCourse.push()
        //     setCourse(item.id);
        //   } else if (item.type == 1) {
        //     setInteract(item.id);
        //   } else if (item.type == 2) {
        //     setVideo(item.id);
        //   } else if (item.type == 3) {
        //     setCartoon(item.id);
        //   } else if (item.type == 4) {
        //     setPractice(item.id);
        //   }
        // });
      })();
    }
  }, []);
  console.log(arrCourse, 0);
  console.log(arrInteract, 1);
  console.log(arrVideo, 2);
  console.log(arrCartoon, 3);
  console.log(arrPractice, 4);

  const exportListStudyData = async () => {
    if (studyDataItem?.length == 0) {
      message.destroy();
      message.error('没有可导出的数据');
      return;
    }
    setLoading(true);
    await courseItemExport({
      exportType: 'exportCourseItems',
      map: {
        itemId: Number(itemId),
      },
      fileName: `${activityId}_${itemId}_${moment(new Date()).format(
        'YYYY-MM-DD HH时mm分ss秒',
      )}.xlsx`,
    });
    setLoading(false);
  };

  return (
    <PageContainer
      className={styles.info}
      header={{
        title: '',
        breadcrumb: {},
      }}
      content={
        <Row>
          <div className={styles.contain}>
            <div className={styles.left_contain}>
              <span className={styles.tag}>条目ID：</span>
              <span>{dataInfo ? dataInfo.id : '-'}</span>
            </div>
            <div className={styles.left_contain2}>
              <span className={styles.tag}>条目名称：</span>
              <span>{dataInfo ? dataInfo.name : '-'}</span>
            </div>
          </div>
          <div className={styles.contain2}>
            <div className={styles.right_contain}>
              <span className={styles.tag2}>条目开始时间：</span>
              <span>{dataInfo ? moment(dataInfo.startTime).format('YYYY-MM-DD hh:mm') : '-'}</span>
            </div>
            <Button loading={loading} onClick={exportListStudyData}>
              导出条目数据
            </Button>
          </div>
        </Row>
      }
      tabProps={{ size: 'small' }}
      onTabChange={(e) => {
        setActiveKey(e);
      }}
    >
      <Card>
        {arrCourse || arrInteract || arrVideo || arrCartoon || arrPractice ? (
          <Tabs defaultActiveKey="1" type="card">
            {arrCourse && arrCourse.length > 0
              ? arrCourse.map((item: Situation) => (
                  <TabPane tab={item.sourceName??"课堂数据"} key={item.id}>
                    <ClassData key={item.id} stepIdNew={item.id} />
                  </TabPane>
                ))
              : null}
            {arrInteract && arrInteract.length > 0
              ? arrInteract.map((item: Situation) => (
                  <TabPane tab={item.sourceName??"互动回放"} key={item.id}>
                    <Interact key={item.id} stepIdNew={item.id} />
                  </TabPane>
                  // <Interact stepIdNew={interact} />
                ))
              : null}
            {arrCartoon && arrCartoon.length > 0
              ? arrCartoon.map((item: Situation) => (
                  <TabPane tab={item.sourceName??"动画课"} key={item.id}>
                    <Cartoon key={item.id} stepIdNew={item.id} />
                    {/* <Cartoon stepIdNew={cartoon} /> */}
                  </TabPane>
                ))
              : null}
            {arrVideo && arrVideo.length > 0
              ? arrVideo.map((item: Situation) => (
                  <TabPane tab={item.sourceName??"录像课"} key={item.id}>
                    {/* <Video stepIdNew={video} /> */}
                    <Video key={item.id} stepIdNew={item.id} />
                  </TabPane>
                ))
              : null}
            {arrPractice && arrPractice.length > 0
              ? arrPractice.map((item: Situation) => (
                  <TabPane tab={item.sourceName??"练习题"} key={item.id}>
                    {/* <Practice stepIdNew={practice} /> */}
                    <Practice key={item.id} stepIdNew={item.id} />
                  </TabPane>
                ))
              : null}
          </Tabs>
        ) : (
          '暂无数据'
        )}
      </Card>
    </PageContainer>
  );
}
